<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <link rel="stylesheet" type="text/css" href="${ctx}/static/javascript/semantic/2.1/semantic.css">
    <script src="${ctx}/static/javascript/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/static/javascript/semantic/2.1/semantic.min.js"></script>
  <style type="text/css">

    .hidden.menu {
      display: none;
    }

    .masthead.segment {
      min-height: 83px;
      padding: 1em 0em;
    }
    .masthead .logo.item img {
      margin-right: 1em;
    }
    .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
    }
    .masthead h1.ui.header {
      margin-top: 3em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
    }
    .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
    }

    .ui.vertical.stripe {
      padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }

    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }

    .footer.segment {
      padding: 5em 0em;
    }

    .secondary.pointing.menu .toc.item {
      display: none;
    }

    @media only screen and (max-width: 350px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 83px;
      }
      .masthead h1.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }
    }

  </style>


  <script>
    $(document)
            .ready(function() {

              // fix menu when passed
              $('.masthead')
                      .visibility({
                        once: false,
                        onBottomPassed: function() {
                          $('.fixed.menu').transition('fade in');
                        },
                        onBottomPassedReverse: function() {
                          $('.fixed.menu').transition('fade out');
                        }
                      })
              ;

              // create sidebar and attach to menu open
              $('.ui.sidebar')
                      .sidebar('attach events', '.toc.item')
              ;

            })
    ;
  </script>


  <sitemesh:write property='head'/>
</head>
<body>
<!-- Following Menu -->
<div class="ui large top fixed hidden menu">
  <div class="ui container">
    <a class="active item"  href="${ctx}/">首页</a>
    <div class="right menu">
      <div class="item">
        <a class="ui inverted button" href="${ctx}/user/logout">退出</a>
      </div>
    </div>
  </div>
</div>


<div class="pusher">

<div class="ui inverted vertical masthead center aligned segment">

  <div class="ui container">
    <div class="ui large secondary inverted pointing menu">
      <a class="active item"  href="${ctx}/">首页</a>
      <div class="right item">
        <a class="ui inverted button" href="${ctx}/user/logout">退出</a>
      </div>
    </div>
  </div>
</div>

<div class="ui container" style="min-height: 360px;">
	<sitemesh:write property='body'/>
</div>

<div class="ui inverted vertical footer segment">
  <div class="ui container">
    <div class="ui stackable inverted divided equal height stackable grid">
      <div class="three wide column">
        <h4 class="ui inverted header">About</h4>
        <div class="ui inverted link list">
          <a href="#" class="item">Sitemap</a>
          <a href="#" class="item">Contact Us</a>
          <a href="#" class="item">Religious Ceremonies</a>
          <a href="#" class="item">Gazebo Plans</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui inverted header">Services</h4>
        <div class="ui inverted link list">
          <a href="#" class="item">Banana Pre-Order</a>
          <a href="#" class="item">DNA FAQ</a>
          <a href="#" class="item">How To Access</a>
          <a href="#" class="item">Favorite X-Men</a>
        </div>
      </div>
      <div class="seven wide column">
        <h4 class="ui inverted header">Footer Header</h4>
        <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
      </div>
    </div>
  </div>
</div>
</div>

</body>
</html>

